import { Box } from '@mui/material';
import React from 'react';
import { Routes, Route } from 'react-router-dom';

import Navigation from './components/common/Navigation';
import Layout from './components/Layout';
import Algorithms from './pages/algorithms/Algorithms';
import DataStructures from './pages/algorithms/DataStructures';
import Home from './pages/Home';
import JavaScriptAdvanced from './pages/javascript/JavaScriptAdvanced';
import JavaScriptBasics from './pages/javascript/JavaScriptBasics';
import TodoApp from './pages/projects/TodoApp';
import ReactAdvanced from './pages/react/ReactAdvanced';
import ReactBasics from './pages/react/ReactBasics';

const App: React.FC = () => {
  return (
    <Box sx={{ display: 'flex', minHeight: '100vh' }}>
      <Navigation />
      <Box component="main" sx={{ flexGrow: 1, minHeight: '100vh' }}>
        <Routes>
          <Route
            path="/"
            element={
              <Layout>
                <Home />
              </Layout>
            }
          />
          <Route
            path="/javascript-basics/*"
            element={
              <Layout>
                <JavaScriptBasics />
              </Layout>
            }
          />
          <Route
            path="/javascript-advanced/*"
            element={
              <Layout>
                <JavaScriptAdvanced />
              </Layout>
            }
          />
          <Route
            path="/react-basics/*"
            element={
              <Layout>
                <ReactBasics />
              </Layout>
            }
          />
          <Route
            path="/react-advanced/*"
            element={
              <Layout>
                <ReactAdvanced />
              </Layout>
            }
          />
          <Route
            path="/data-structures/*"
            element={
              <Layout>
                <DataStructures />
              </Layout>
            }
          />
          <Route
            path="/algorithms/*"
            element={
              <Layout>
                <Algorithms />
              </Layout>
            }
          />
          <Route
            path="/todo"
            element={
              <Layout>
                <TodoApp />
              </Layout>
            }
          />
        </Routes>
      </Box>
    </Box>
  );
};

export default App;
